.main-app{
  overflow: auto;
  .main-app-top{
    .filter1{
      position: absolute;
      bottom: 0;
      width: 164px;
      font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
    }
    .filter-left{
      left: 200px;
    }
    .filter-right{
      right: 200px;
    }
  }

  .main-app-ctn{
    padding: 0 39px;
    flex-direction: column;

    .short-info{
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 25px;
      width: 152px;
      height: 236px;
      background: url("@/assets/icons/logistics/short-bg.png") center/100% 100% no-repeat;
      img{
        width: 107px;
        height: 90px;
        margin-bottom: 23px;
      }
      span{
        font-size: 30px;
        color: #FFFFFF;
      }
      label{
        font-size: 40px;
        background: linear-gradient(180deg, #95CDFF 0%, #D8EDFF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-family: din-medium;
      }
    }
    .pie{
      position: relative;
      width: 100%;
      font-family: SourceHanSansSC-Bold;
      font-size: 30px;
      margin-bottom: 18px;
      span{
        position: absolute;
        display: block;
        min-width: 10px;
        text-align: center;
        left: 0;
        right: 0;
        margin: 0 auto; /* 水平方向的外边距为自动 */
        color: #3BFFDC;
        text-shadow: 0 2px 0 rgba(0,9,17,0.34);
      }
    }

    .pie-1{
      height: 236px;
      min-height: 236px;
      background: url("@/assets/icons/logistics/pie-bg-1.png") center/100% 100% no-repeat;
    }
    .pie-2{
      height: 236px;
      background: url("@/assets/icons/logistics/pie-bg-2.png") center/100% 100% no-repeat;
    }

    .pie2{
      display: flex;
      justify-content: space-between;
      .pie2-box{
        width: 864px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        &.p2-1{
          width: 804px;
        }

        .side-box{
          width: 100%;
          height: 235px;
          display: flex;
          justify-content: space-between;
          .side-box-item{
            display: flex;
            flex-direction: column;
            .dell{
              display: flex;
              justify-content: space-between;
            }
            .short-info{
              width: 115px;
              height: 184px;
              img{
                width: 70px;
                height: 59px;
              }
              span{
                font-size: 18px;
              }
              label{
                font-size: 24px;
              }
            }
            .side-box-sub{
              display: flex;
              justify-content: space-between;
              .side-box-sub-item{
                width: 152px;
                display: flex;
                flex-direction: column;
                .short-info{
                  width: 72px;
                  height: 113px;
                  padding-top: 16px;
                  img{
                    width: 44px;
                    height: 38px;
                    margin-bottom: 11px;
                  }
                  span{
                    font-size: 12px;
                  }
                  label{
                    font-size: 16px;
                  }
                }
                .pie-4{
                  height: 184px;
                  min-height: 184px;
                  background: url("@/assets/icons/logistics/pie-bg-4.png") center/100% 100% no-repeat;
                  margin-bottom: 18px;
                  span{
                    font-size: 24px;
                  }
                }
                &.si1{
                  width: 213px;
                  .sub-side{
                    display: flex;
                    justify-content: space-between;
                    .sub-side-item{
                      width: 101px;
                      .pie-5{
                        width: 100%;
                        height: 113px;
                        background: url("@/assets/icons/logistics/pie-bg-4.png") center/100% 100% no-repeat;
                        span{
                          font-size: 14px;
                        }
                      }
                      .short-info{
                        width: 46px;
                        height: 92px;
                        padding-top: 10px;
                        img{
                          width: 40px;
                          height: 33px;
                        }
                        label{
                          font-size: 14px;
                        }
                      }
                    }
                  }
                }
              }
            }
          }
          .side-box-1{
            width: 545px;
          }
          .side-box-2{
            width: 241px;
          }
          .side-box-3 {
            width: 640px;
            .side-box-sub{
              .side-box-sub-item{
                width: 502px;
                display: flex;
                flex-direction: column;
                .pie{
                  background: url("@/assets/icons/logistics/pie-bg-5.png") center/100% 100% no-repeat;
                }
                .mark-box{
                  display: flex;
                  justify-content: space-between;
                  .pie-5{
                    height: 183px;
                    margin-bottom: 9px;
                    span{
                      font-size: 24px;
                    }
                  }
                  .mark-box-1{
                    width: 154px;
                  }
                  .mark-box-2{
                    width: 335px;
                  }
                  .mark-box-item{
                    display: flex;
                    justify-content: space-between;
                    .mark-box-item-sub{
                      width: 71px;
                      &.is2{
                        .short-info span{
                          line-height: 9px;
                          font-size: 12px;
                        }
                      }
                      &.is1{
                        width: 173px;
                        .short-info{
                          width: 53px;
                          padding-top: 3px;
                          img{
                            width: 40px;
                            height: 33px;
                          }
                          span{
                            line-height: 9px;
                            font-size: 12px;
                          }
                        }
                      }
                      .pie-6{
                        height: 97.3px;
                        background: url("@/assets/icons/logistics/pie-bg-4.png") center/100% 100% no-repeat;
                        margin-bottom: 9px;
                        span{
                          font-size: 12px;
                          left: 0;
                        }
                      }
                      .short-info{
                        width: 32.4px;
                        height: 94px;
                        img{
                          width: 24px;
                          height: 19px;
                        }
                        span,label{
                          font-size: 12px;
                        }
                      }
                    }
                  }
                }
              }
              .short-info{
                width: 125px;
                span{
                  font-size: 16px;
                  margin-bottom: 4px;
                }
              }
            }
          }
          .side-box-4 {
            width: 204px;
            .dell .short-info{
              width: 96px;
            }
          }

          .pie-3{
            height: 235px;
            min-height: 235px;
            background: url("@/assets/icons/logistics/pie-bg-3.png") center/100% 100% no-repeat;
            margin-bottom: 18px;
          }
        }
      }
    }
  }
}